🏘️ Route Group - 공통 레이아웃 분리 패턴

Route Group은 URL 구조에는 영향을 주지 않으면서,
레이아웃·미들웨어·로딩 전략을 논리적으로 묶기 위한 디렉토리 패턴입니다.

1️⃣ Route Group이란?

URL에는 나타나지 않지만, 라우트 트리를 분리하기 위한 디렉토리

(site)
(auth)
(marketing)

( )로 감싼 폴더는 라우팅 경로에 포함되지 않음
내부 구조는 일반 라우트와 동일하게 동작

app/
├── (site)/
│   ├── page.tsx
│   └── about/page.tsx

실제 URL

/
/about

2️⃣ Route Group의 필요성

App Router의 layout.tsx는 하위 라우트에 자동 전파됩니다.

app/layout.tsx

모든 페이지에 공통 적용
❌ 특정 페이지에서만 제외하기 어려움

문제 상황

대부분의 페이지 → Header / Footer 필요
특정 페이지 (resume, auth, pdf, landing) → ❌ 공통 레이아웃 제외

👉 Route Group으로 트리를 분리하면 해결

3️⃣ 공통 레이아웃 분리 패턴

🔹 구조 예시

app/
├── (site)/
│   ├── layout.tsx
│   ├── page.tsx
│   ├── posts/
│   └── projects/
│
├── resume/
│   └── page.tsx

(site) 그룹에만 공통 레이아웃 적용
resume는 루트 레이아웃 영향 ❌

🔹 공통 레이아웃

// app/(site)/layout.tsx
export default function SiteLayout({ children }: { children: React.ReactNode; }) {
	return (
		<html lang="ko">
			<body>
				<Header />
				{children}
				<Footer />
			</body>
		</html>
	);
}

🔹 레이아웃 제외 페이지

// app/resume/page.tsx
export default function ResumePage() {
	return (
		<html lang="ko">
			<body>
				<ResumeContent />
			</body>
		</html>
	);
}

📌 루트 layout이 없기 때문에

<html> / <body> 직접 포함 필수

4️⃣ Route Group은 "라우팅 트리 제어" 도구

Route Group은 단순 폴더 정리가 아니라
라우트 트리 자체를 나누는 장치입니다.

가능한 것들

레이아웃 분리
loading.tsx 범위 분리
error.tsx 범위 분리
template.tsx 분리
auth / admin / marketing 영역 구분

app/
├── (auth)/
│   ├── layout.tsx
│   └── login/page.tsx
├── (site)/
│   └── layout.tsx

5️⃣ Route Group 활용 시점

✅ 사용 케이스

공통 레이아웃을 일부 페이지에서만 제외
인증 영역 / 관리자 페이지 분리
마케팅 페이지 vs 서비스 페이지 분리
PDF / iframe / 임베드 전용 페이지
다른 loading / error UX가 필요한 경우

✍️ 한 줄 정리

Route Group은 URL이 아닌 라우트 트리를 분리하는 도구이며
App Router에서 레이아웃 적용 범위를 제어하는 핵심 패턴입니다.